<script lang="ts" setup>
import { addCardAPI, getCardDetailAPI, updateCardAPI } from '@/apis/card';
import router from '@/router';
import type { CardDetail, CardParams } from '@/types/card';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

// 表单一参数
const carInfoForm=ref<Partial<CardParams>>({
  personName:'',
  phoneNumber:'',
  carNumber:'',
  carBrand:'',

})
// 表单校验 表单1
const carInfoFormRules=ref<FormRules<CardParams>>({
  personName: [
    { required: true, message: '请输入车主姓名', trigger: 'blur'  }
  ],
  phoneNumber: [
    { required: true, message: '请输入联系方式', trigger: 'blur'  },
  ],
  carNumber: [
    { required: true, message: '请输入车牌号码', trigger: 'blur'  },
  ],
  carBrand: [
    { required: true, message: '请输入车辆品牌', trigger: 'blur'  }
  ]
})

// 表单2              可选
const  feeForm=ref<Partial<CardParams>>({
  cardStartDate:'',
  cardEndDate:'',
  paymentAmount:0,
  paymentMethod:undefined,

})
// 支付方式
const  payMethodList=[
  {id:'Alipay',name:'支付宝'},
  {id:'WeChat',name:'微信'},
  {id:'Cash',name:'线下'},

  
]
// 日期
const cardTiem = ref<[string, string]>()
watch(cardTiem,(val)=>{
  console.log(val);
  if(val){
    feeForm.value.cardStartDate=val[0]
    feeForm.value.cardEndDate=val[1]
  }else{
    feeForm.value.cardStartDate=''
    feeForm.value.cardEndDate=''
  }
})

// 表单2校验
const feeFormRules=ref<FormRules<CardParams>>({
  cardStartDate: [
        { required: true, message: '请选择开始日期', trigger: 'blur'  }
      ],
      cardEndDate: [
        { required: true, message: '请选择结束日期', trigger: 'blur'  }
      ],
      paymentAmount: [
        { required: true, message: '请输入支付金额', trigger: 'blur'  }
      ],
      paymentMethod: [
        { required: true, message: '请选择支付方式', trigger: 'blur'  }
      ]

})


// 表单整体校验
const carInfoFormRef=ref<FormInstance>()
const feeFormRef=ref<FormInstance>()

const onSubmit = async () => {
  try {
    await Promise.all([
      carInfoFormRef.value?.validate(),
      feeFormRef.value?.validate()
    ])

    const params = {
      ...carInfoForm.value,
      ...feeForm.value,
      paymentAmount: Number(feeForm.value.paymentAmount),
      paymentMethod: feeForm.value.paymentMethod
    }

    if (route.params.id) {
      await updateCardAPI({
        ...params,
        ...editForm.value,
        carInfoId: Number(editForm.value.carInfoId),
        rechargeId: Number(editForm.value.rechargeId)
      })
      ElMessage.success('编辑成功')
    } else {
      await addCardAPI(params)
      ElMessage.success('添加成功')
    }
    router.back()
  } catch (err) {
    console.error(err)
    ElMessage.error('操作失败')
  }
}
// 清空表单
const  onReset=()=>{
  carInfoFormRef.value?.resetFields()
  feeFormRef.value?.resetFields()

}


// 定义提交编辑的参数
const editForm=ref<Partial<CardDetail>>({
  carBrand:undefined,
  rechargeId:undefined,
})

// 月卡数据回显

const getCardDetailData=async(id:string)=>{
    const res=await getCardDetailAPI(id)
    console.log(res);
    // 解构出全部数据
    const {personName,phoneNumber,carNumber,carBrand,cardStartDate,
      cardEndDate,paymentAmount,paymentMethod,carInfoId,rechargeId
    }=res.data
    // 表单1回显
    carInfoForm.value={personName,phoneNumber,carNumber,carBrand}
    // 表单2回显
    feeForm.value={cardStartDate,cardEndDate,paymentAmount,paymentMethod}
// 日期回显 
     cardTiem.value=[cardStartDate,cardEndDate]
     // 编辑回显
     editForm.value={carInfoId,rechargeId}
}
// 判断路由是否有id
const  route=useRoute()
if(route.params.id){
  getCardDetailData(route.params.id as string)
}

  </script>

<template>
    <div class="add-card">
      <header class="add-header">
        <el-page-header :content="$route.params.id?'编辑月卡':'添加月卡'" @back="$router.back()" />
      </header>
      <main class="add-main">
        <div class="form-container">
          <div class="title">车辆信息</div>
          <div class="form">
            <el-form 
            ref="carInfoFormRef"
            :model="carInfoForm"
            :rules="carInfoFormRules"
            label-width="100px">
              <el-form-item label="车主姓名" prop="personName">
                <el-input v-model="carInfoForm.personName"/>
              </el-form-item>
              <el-form-item label="联系方式" prop="phoneNumber">
                <el-input  v-model="carInfoForm.phoneNumber"/>
              </el-form-item>
              <el-form-item label="车辆号码" prop="carNumber">
                <el-input v-model="carInfoForm.carNumber"/>
              </el-form-item>
              <el-form-item label="车辆品牌" prop="carBrand">
                <el-input  v-model="carInfoForm.carBrand"/>
              </el-form-item>
            </el-form>
          </div>
      {{ carInfoForm }}
      <!-- -------2-->
    
        </div>
        <div class="form-container">
          <div class="title">最新一次月卡缴费信息</div>
          <div class="form">
            <el-form ref="feeFormRef" label-width="100px" :rules="feeFormRules" :model="feeForm">
              <el-form-item label="有效日期" prop="cardEndDate">
                <el-date-picker  v-model="cardTiem" value-format="YYYY-MM-DD" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" />
              </el-form-item>
              <el-form-item label="支付金额"  prop="paymentAmount">
                <el-input v-model="feeForm.paymentAmount" />
              </el-form-item>
              <el-form-item label="支付方式" prop="paymentMethod">
                <el-select v-model="feeForm.paymentMethod">
                  <el-option v-for="item in payMethodList" :key="item.id" :value="item.name" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          {{ feeForm }}{{ cardTiem }}
        </div>
  
      </main>
      <footer class="add-footer">
        <div class="btn-container">
          <el-button @click="onReset()">重置</el-button>
          <el-button type="primary" @click="onSubmit()">确定</el-button>
        </div>
      </footer>
    </div>
  </template>
  
 
  
  <style scoped lang="scss">
  .add-card {
    background-color: #f4f6f8;
    height: 100vh;
  
    .add-header {
      display: flex;
      align-items: center;
      padding: 0 20px;
      height: 64px;
      background-color: #fff;
  
      .left {
        span {
          margin-right: 4px;
        }
  
        .arrow {
          cursor: pointer;
        }
      }
  
      .right {
        text-align: right;
      }
    }
  
    .add-main {
      background: #f4f6f8;
      padding: 20px 130px;
  
      .form-container {
        background-color: #fff;
  
        .title {
          height: 60px;
          line-height: 60px;
          padding-left: 20px;
        }
  
        .form {
          margin-bottom: 20px;
          padding: 20px 65px 24px;
  
          .el-form {
            display: flex;
            flex-wrap: wrap;
  
            .el-form-item {
              width: 50%;
            }
          }
        }
      }
  
      .preview {
        img {
          width: 100px;
        }
      }
    }
  
    .add-footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 24px 50px;
      color: #000000d9;
      font-size: 14px;
      background: #fff;
      text-align: center;
    }
  }
  </style>